<template>
    <div class="dialog">
        <transition name="fa">
            <div class="dialog__wrapper" v-if="visible" @click="closeModal">
                <div class="dialog-box">
                    <div class="dialog__header">
                    <div class="dialog__title">{{ title }}</div>
                    <button @click="close">×</button>
                    </div>
                    <div class="dialog__body">
                        水电费水电费
                    <slot></slot>
                    </div>
                    <div class="dialog__footer">
                    <slot name="footer"></slot>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div class="modal" v-show="visible" @click="close"></div>
        </transition>
      </div>
</template>


<script>
    export default {
        data() {
            return {

            }
        },
        props: {
            title: String,
            visible: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            close() {
                this.$emit('update:visible', false) // 传递关闭事件
            },
            closeModal(e) {
                if (this.visible) {
                    document.querySelector('.dialog-box').contains(e.target) ? '' : this.close(); // 判断点击的落点在不在dialog对话框内，如果在对话框外就调用this.close()方法关闭对话框
                }
            }
        }
    }
    
</script>

<style lang="scss">
    .modal {
        position: fixed;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        opacity: .5;
        background: #000;
        z-index: 1000;
    }
    .dialog-box {
        width: 40%;
        /* min-height: 300px; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: white;
        z-index: 10000;
    }
    .dialog__header {
        padding: 20px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        .dialog__title {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
        }
        button {
            background: none;
            border: none;
            font-size: 18px;

            cursor: pointer;
        }
    }
    .dialog__body {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
    }
    .dialog__footer {
        padding: 20px;
        padding-top: 10px;
        text-align: right;
        box-sizing: border-box;
    }
    /* .fa-enter-active, .fa-leave-active {
        transition: all .3s ease-in-out;
    }
    .fa-enter, .fa-leave-to {
        transform: translateY(-10px);
    } */
    .fade-enter-active, .fade-leave-active {
        transition: opacity .3s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    


</style>